<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form layuimini-form">
        <input type="text" name="id" id="id" style="display: none"
               class="layui-input">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label required">产品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="itemName" id="itemName" lay-verify="required"
                           value=""
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label required">产品编号</label>
                <div class="layui-input-block">
                    <input type="text" name="itemNo" id="itemNo" lay-verify="required"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label required">工厂</label>
                <div class="layui-input-block">
                    <select name="supplierId" id="supplierId" lay-verify="required" lay-search="">
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">产品单位</label>
                <div class="layui-input-block">
                    <input type="text" name="itemUnit" id="itemUnit"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">产品重量(kg)</label>
                <div class="layui-input-block">
                    <input type="number" name="itemWeight" id="itemWeight"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">材质分析</label>
                <div class="layui-input-block">
                    <input type="text" name="itemQuality" id="itemQuality"
                           placeholder="" value=""
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">客人货号</label>
                <div class="layui-input-block">
                    <input type="text" name="customerItemsNo" id="customerItemsNo"
                           value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">工厂货号</label>
                <div class="layui-input-block">
                    <input type="text" name="supplierItemsNo" id="supplierItemsNo"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" id="supplierPriceShow">
                <label class="layui-form-label">工厂价格</label>
                <div class="layui-input-block">
                    <input type="number" name="supplierPrice" id="supplierPrice"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-inline">
                    <label class="layui-form-label">是否含税</label>
                    <div class="layui-input-block">
                        <select name="isTax" id="isTax" lay-search="">
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">产品尺寸(cm)</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="itemSizeLength" id="itemSizeLength"
                           value="" class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="itemSizeWidth" id="itemSizeWidth"
                           value="" class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="itemSizeHeight" id="itemSizeHeight"
                           value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">产品尺寸(英寸)</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="itemSizeLengthInch" id="itemSizeLengthInch"
                           value="" disabled="disabled" class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="itemSizeWidthInch" id="itemSizeWidthInch"
                           value="" disabled="disabled" class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="itemSizeHeightInch" id="itemSizeHeightInch"
                           value="" disabled="disabled" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">内箱(cm)</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="innerBoxSizeLength" id="innerBoxSizeLength"
                           value="" class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="innerBoxSizeWidth" id="innerBoxSizeWidth"
                           value="" class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="innerBoxSizeHeight" id="innerBoxSizeHeight"
                           value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">内箱(英寸)</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="innerBoxSizeLengthInch" id="innerBoxSizeLengthInch"
                           value="" disabled="disabled"  class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="innerBoxSizeWidthInch" id="innerBoxSizeWidthInch"
                           value="" disabled="disabled" class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="innerBoxSizeHeightInch" id="innerBoxSizeHeightInch"
                           value="" disabled="disabled" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">外箱(cm)</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="boxSizeLength" id="boxSizeLength"
                           value="" class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="boxSizeWidth" id="boxSizeWidth"
                           value="" class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="boxSizeHeight" id="boxSizeHeight"
                           value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">外箱(cm)</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="boxSizeLengthInch" id="boxSizeLengthInch"
                           value="" disabled="disabled" class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="boxSizeWidthInch" id="boxSizeWidthInch"
                           value="" disabled="disabled" class="layui-input">
                </div>
                <div class="layui-form-mid">*</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="boxSizeHeightInch" id="boxSizeHeightInch"
                           value="" disabled="disabled" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">立方数(m³)</label>
                <div class="layui-input-block">
                    <input type="number" name="cubeNumber" id="cubeNumber"
                           value="" disabled="disabled"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">才数(m³)</label>
                <div class="layui-input-block">
                    <input type="number" name="justCount" id="justCount"
                           value="" disabled="disabled"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">外箱-毛重(kg)</label>
                <div class="layui-input-block">
                    <input type="number" name="boxSroughWeight" id="boxSroughWeight"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">外箱-毛重(磅)</label>
                <div class="layui-input-block">
                    <input type="number" name="boxSroughWeightBl" id="boxSroughWeightBl"
                           value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">外箱-净重(kg)</label>
                <div class="layui-input-block">
                    <input type="number" name="boxSuttle" id="boxSuttle"
                           value="" disabled="disabled" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">外箱-净重(磅)</label>
                <div class="layui-input-block">
                    <input type="number" name="boxSuttleBl" id="boxSuttleBl"
                           value="" disabled="disabled" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">內盒数量</label>
                <div class="layui-input-block">
                    <input type="number" name="innerBoxNumber" id="innerBoxNumber"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">外箱数量</label>
                <div class="layui-input-block">
                    <input type="number" name="boxNumber" id="boxNumber"
                           value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">属性1</label>
                <div class="layui-input-block">
                    <input type="text" name="attr1" id="attr1"
                           value=""  class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">属性2</label>
                <div class="layui-input-block">
                    <input type="text" name="attr2" id="attr2"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">属性3</label>
                <div class="layui-input-block">
                    <input type="text" name="attr3" id="attr3"
                           value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">属性4</label>
                <div class="layui-input-block">
                    <input type="text" name="attr4" id="attr4"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">属性5</label>
                <div class="layui-input-block">
                    <input type="text" name="attr5" id="attr5"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">属性6</label>
                <div class="layui-input-block">
                    <input type="text" name="attr6" id="attr6"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">属性7</label>
                    <div class="layui-input-block">
                        <input type="text" name="attr7" id="attr7"
                               value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">属性8</label>
                    <div class="layui-input-block">
                        <input type="text" name="attr8" id="attr8"
                               value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">属性9</label>
                    <div class="layui-input-block">
                        <input type="text" name="attr9" id="attr9"
                               value="" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">

            <div class="layui-upload">
                <input type="text" name="photo" id="photo" style="display: none"
                       class="layui-input">
                <button type="button" class="layui-btn" id="upload">图片上传</button>
                <button type="button" class="layui-btn" lay-filter="data-reUpload-btn" id="reUpload">重新上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="uploadImg"></div>
                </blockquote>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="/static/js/common.js"></script>
<script>
    let supplierId = $.common.getUrlParam("supplierId");
    let isTax = $.common.getUrlParam("isTax");
    let user = $.common.getUserInfo();
    if (0 != user.powerDataType) {
        $('#supplierPrice').attr("disabled", true);
    }
    if (2 == user.powerDataType) {
        $('#supplierPriceShow').css("display", "none");
    }
    layui.use(['form', 'upload', 'element', 'layer'], function () {
        var form = layui.form,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer;

        //工厂
        let callback1 = {
            onSuccess: function (result) {
                if (result.code == '0') {
                    $('#supplierId').append(new Option('请选择', '', true));// 下拉菜单里添加元素
                    $.each(result.data, function (index, item) {
                        let option = new Option(item.supplierName, item.id);
                        if (supplierId) {
                            if (item.id == supplierId) {
                                option.selected = true;
                            }
                        }
                        $('#supplierId').append(option);// 下拉菜单里添加元素
                    });
                } else {
                    $.common.showErrorMessage(result.message)
                    return false;
                }
            }
        };
        $.xAjax('/supplier/select', 'POST', JSON.stringify({}), callback1);
        let isTaxArr = [{"key": "请选择", "value": ""}, {"key": "是", "value": "yes"}, {"key": "否", "value": "no"}]
        $.each(isTaxArr, function (index, item) {
            let option = new Option(item.key, item.value);
            if (item.value == isTax) {
                option.selected = true;
            }
            $('#isTax').append(option);// 下拉菜单里添加元素
        });
        //初始化下拉框
        form.render("select");

        upload.render({
            elem: '#upload'
            , url: '/uploadFile/item' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , done: function (res) {
                //如果上传失败
                if (res.code != 0) {
                    return layer.msg('上传失败');
                } else {
                    $('#uploadImg').append('<img src="' + res.data + '" class="layui-upload-img" width="50%" height="50%">')
                    let ph = $('#photo').val() + res.data + ";";
                    $('#photo').val(ph);
                }
                //上传成功的一些操作
            }
            , error: function () {
                return layer.msg('上传异常');
            }

        });
        //清空图片
        $('#reUpload').on('click', function (data) {
            $('#uploadImg img').remove();
            $('#photo').val('');
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let url = "/item/saveOrUpdate"
            let callback = {
                onSuccess: function (result) {
                    if (result.code == '0') {
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.location.reload();
                        parent.layer.close(iframeIndex);
                    } else {
                        $.common.showErrorMessage(result.message)
                        return false;
                    }
                }
            };
            $.xAjax(url, 'POST', JSON.stringify(data.field), callback);
            return false;
        });

    });

    $(function () {
        //计算立方数
        $('#boxSizeWidth,#boxSizeLength,#boxSizeHeight').bind('change', function (da) {
            let w = parseFloat($('#boxSizeWidth').val());
            let l = parseFloat($('#boxSizeLength').val());
            let h = parseFloat($('#boxSizeHeight').val());
            let s = (w * l * h) / 1000000;
            let c = s * 35.315;
            $('#cubeNumber').val(s.toFixed(4));
            $('#justCount').val(c.toFixed(4));
        })
        $('#boxNumber,#itemWeight').bind('change', function (da) {
            let boxNumber = parseFloat($('#boxNumber').val());
            let itemWeight = parseFloat($('#itemWeight').val());
            $('#boxSuttle').val(boxNumber * itemWeight);
        })
    })
    var inchs = [];
    $('[id]').each(function() {
        if($(this).attr('id').endsWith('Inch')) {
            inchs.push($(this).attr('id'));
        }
    });
    if (inchs) {
        for(let i = 0; i < inchs.length; i++) {
            let inch=inchs[i];
            let select = "#" + inch ;
            let selectOld ="#" + inch.substr(0,inch.length - 4)
            $(selectOld).bind('change', function (da) {
                let w = parseFloat($(selectOld).val());
                let c = w / 2.54;
                $(select).val(c.toFixed(2));
            })
        }
    }
    var bls = [];
    $('[id]').each(function() {
        if($(this).attr('id').endsWith('Bl')) {
            bls.push($(this).attr('id'));
        }
    });
    if (bls) {
        for(let i = 0; i < bls.length; i++) {
            let bl=bls[i];
            let select = "#" + bl ;
            let selectOld ="#" + bl.substr(0,bl.length - 2)
            $(selectOld).bind('change', function (da) {
                let w = parseFloat($(selectOld).val());
                let c = w * 2.2;
                $(select).val(c.toFixed(2));
            })
        }
    }
</script>
</body>
</html>
